<template>
	<view class="footprint">
		<view v-if="true" class="yt-list" :class="'bgx-' + themeColor.name">
			<view class="yt-list-cell b-t" v-if="true">
				<text class="cell-tit clamp">统计</text>
				<view class="cell-tip">
					<radio-group @change="handleChange">
						<label class="gender-item">
							<radio value="1" checked class="gender-item-radio" style="transform:scale(0.7)" :color="themeColor.color" />
							<text class="gender-item-text">日平均</text>
						</label>
						<label class="gender-item">
							<radio value="2" style="transform:scale(0.7)" class="gender-item-radio" :color="themeColor.color" />
							<text class="gender-item-text">周平均</text>
						</label>

						<label class="gender-item">
							<radio value="3" style="transform:scale(0.7)" class="gender-item-radio" :color="themeColor.color" />
							<text class="gender-item-text">月平均</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>

		
		<view class="qiun-charts" >
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!--#endif-->
		</view>	

		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
import {
	getXieyaTotalList,
	getXietangTotalList,
	getSportTotalList,
	getTiWengTotalList,
	getXieyangTotalList,
	getXiezhiTotalList,
	getWeightTotalList,
	getEcgdataTotalList,
	getNiaocgTotalList
} from '@/api/userInfo';
import { isJSON } from '@/common/checker.js';
import moment from '@/common/moment';
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
var _self;
var canvaColumn = null;
var canvaLineA=null;
var lastMoveTime=null;//最后执行移动的时间戳
export default {
	components: [rfLoadMore],
	data() {
		return {
			watchChart: {
				startDate: '',
				endDate: ''
			},
			weekType: 1,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			textarea: '',
			Interactive:'',//交互显示的数据
			page: 1,
			historyList: [],
			chartData: {},
			loading: true,
			loadingType: 'more',
			healthParamStr: '',
			size: [
				{ type: '血压', num: 3 },
				{ type: '血糖', num: 2 },
				{ type: '心率', num: 1 },
				{ type: '运动', num: 2 },
				{ type: '尿酸', num: 1 },
				{ type: '体质', num: 3 },
				{ type: '血氧', num: 2 },
				{ type: '胆固醇', num: 1 },
				{ type: '体温', num: 1 }
			]
		};
	},
	filters: {
		filterType(val) {
			let gaugeType = '系统录入';
			if (val == 1) gaugeType = '健康一体机';
			else if (val == 5) gaugeType = '血压计';
			else if (val == 6) gaugeType = 'sdcc腕表';
			return gaugeType;
		}
	},
	onLoad(opition) {
		this.type = opition.type;
		this.cstmId = opition.cstmId;
		_self = this;
		//#ifdef MP-ALIPAY
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		//#endif
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		if (this.type === '血压') {
			this.testType = 1;
		} else if (this.type === '血糖') {
			this.testType = 3;
		} else if (this.type === '心率') {
			this.testType = 10;
		} else if (this.type === '运动') {
			this.testType = 4;
		} else if (this.type === '尿酸') {
			this.testType = 8;
		} else if (this.type === '体质') {
			this.testType = 2;
		} else if (this.type === '血氧') {
			this.testType = 6;
		} else if (this.type === '胆固醇') {
			this.testType = 7;
		} else if (this.type === '体温') {
			this.testType = 5;
		} else if (this.type === '尿常规') {
			this.testType = 9;
		}
		uni.setNavigationBarTitle({
			title: this.type
		});
		//this.getHealthParam();
		this.getServerData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.historyList = [];
		this.chartData = {};
		this.handleTab('refresh');
	},
	onReachBottom() {
		//this.page++;
		//this.getServerData();
	},
	methods: {
		handleChange(e) {
			this.weekType = e.detail.value;
			this.handleTab();
			this.getServerData();
		},
		getHealthParam() {
			if (this.type === '血压') {
				this.healthParamStr = `正常值：高压(${uni.getStorageSync('XY_GY_MIN')}~${uni.getStorageSync('XY_GY_MAX')})、低压(${uni.getStorageSync(
					'XY_DY_MIN'
				)}~${uni.getStorageSync('XY_DY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`;
			} else if (this.type === '血糖') {
				this.healthParamStr = `正常值：餐前(${uni.getStorageSync('XT_KF_MIN')}~${uni.getStorageSync('XT_KF_MAX')})、餐后(${uni.getStorageSync(
					'XT_CH_MIN'
				)}~${uni.getStorageSync('XT_CH_MAX')})`;
			} else if (this.type === '心率') {
				this.healthParamStr = `正常值：心率(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync('MB_MAX')})`;
			} else if (this.type === '运动') {
				this.healthParamStr = ``;
			} else if (this.type === '尿酸') {
				this.healthParamStr = `正常值：尿酸(${uni.getStorageSync('NS_UMOL_MIN')}~${uni.getStorageSync('NS_UMOL_MAX')})`;
			} else if (this.type === '体质') {
				this.healthParamStr = ``;
			} else if (this.type === '血氧') {
				this.healthParamStr = `正常值：血氧(${uni.getStorageSync('XY_MIN')}~${uni.getStorageSync('XY_MAX')})、脉搏(${uni.getStorageSync('MB_MIN')}~${uni.getStorageSync(
					'MB_MAX'
				)})`;
			} else if (this.type === '胆固醇') {
				this.healthParamStr = `正常值：总胆固醇(${uni.getStorageSync('DGC_MIN')}~${uni.getStorageSync('DGC_MAX')})`;
			} else if (this.type === '体温') {
				this.healthParamStr = `正常值：体温(${uni.getStorageSync('TW_MIN')}~${uni.getStorageSync('TW_MAX')})`;
			} else if (this.type === '尿常规') {
				this.healthParamStr = `正常值：酸碱度PH(${uni.getStorageSync('NCG_PH_MIN')}~${uni.getStorageSync('NCG_PH_MAX')})、比重(${uni.getStorageSync(
					'NCG_SG_MIN'
				)}~${uni.getStorageSync('NCG_SG_MAX')})`;
			}
		},
		getServerData(type) {
			let params = {
				cstmId: this.cstmId,
				type: this.weekType
			};
			let url = `${getXieyaTotalList}`;
			if (this.type === '血压') {
				url = `${getXieyaTotalList}`;
			} else if (this.type === '血糖') {
				url = `${getXietangTotalList}`;
			} else if (this.type === '心率') {
				url = `${getEcgdataTotalList}`;
			} else if (this.type === '运动') {
				url = `${getSportTotalList}`;
			} else if (this.type === '尿酸') {
				url = `${getNiaocgTotalList}`;
			} else if (this.type === '体质') {
				url = `${getWeightTotalList}`;
			} else if (this.type === '血氧') {
				url = `${getXieyangTotalList}`;
			} else if (this.type === '胆固醇') {
				url = `${getXiezhiTotalList}`;
			} else if (this.type === '体温') {
				url = `${getTiWengTotalList}`;
			} else if (this.type === '尿常规') {
				//url = `${getXieyaTotalList}`
			}
			this.$http
				.get(url, params)
				.then(r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					console.log('r.data: ' + JSON.stringify(r.data));

					this.historyList = r.data;

					let series = [];
					let categories = [];
					let chartData = {};
					let data = [];
					let data2 = [];
					let data3 = [];
					let data4 = [];

					let serie = {};
					let serie2 = {};
					let serie3 = {};
					let serie4 = {};

					this.historyList.forEach((item, index) => {
						let gTime = item.days;
						categories.push(gTime);
						if (this.type === '血压') {
							data.push(item.high);
							data2.push(item.low);
							data3.push(item.rate);
						} else if (this.type === '血糖') {
							data.push(item.kfxt);
							data2.push(item.chxt);
						} else if (this.type === '心率') {
							data.push(item.avr_heartrate);
						} else if (this.type === '运动') {
							data.push(item.target);
							data2.push(item.step);
						} else if (this.type === '尿酸') {
							data.push(item.niaosuan);
						} else if (this.type === '体质') {
							data.push(item.weight);
							data2.push(item.height);
							//data3.push(item.bmi);
						} else if (this.type === '血氧') {
							data.push(item.oxygen);
							data2.push(item.rate);
						} else if (this.type === '胆固醇') {
							data.push(item.oxygen);
						} else if (this.type === '体温') {
							data.push(item.tiweng);
						} else if (this.type === '尿常规') {
						}
					});

					if (this.type === '血压') {
						serie['name'] = '高压';
						serie['data'] = data;
						serie2['name'] = '低压';
						serie2['data'] = data2;
						serie3['name'] = '脉搏';
						serie3['data'] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血糖') {
						serie['name'] = '餐后';
						serie['data'] = data;
						serie2['name'] = '餐前';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '心率') {
						serie['name'] = '心率';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '运动') {
						serie['name'] = '目标';
						serie['data'] = data;
						serie2['name'] = '实际';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '尿酸') {
						serie['name'] = '尿酸';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体质') {
						serie['name'] = '体重';
						serie['data'] = data;
						serie2['name'] = '身高';
						serie2['data'] = data2;
						//serie3["name"] = 'BMI';
						//serie3["data"] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血氧') {
						serie['name'] = '血氧值';
						serie['data'] = data;
						serie2['name'] = '脉搏率';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '胆固醇') {
						serie['name'] = '胆固醇';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体温') {
						serie['name'] = '体温';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '尿常规') {
					}

					chartData.series = series;
					chartData.categories = categories;
					_self.showLineA('canvasLineA', chartData);
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
          colors:['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						//disableGrid:true
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},		
		handleTab(type) {
			let params = {
				cstmId: this.cstmId,
				type: this.weekType
			};
			let url = `${getXieyaTotalList}`;
			if (this.type === '血压') {
				url = `${getXieyaTotalList}`;
			} else if (this.type === '血糖') {
				url = `${getXietangTotalList}`;
			} else if (this.type === '心率') {
				url = `${getEcgdataTotalList}`;
			} else if (this.type === '运动') {
				url = `${getSportTotalList}`;
			} else if (this.type === '尿酸') {
				url = `${getNiaocgTotalList}`;
			} else if (this.type === '体质') {
				url = `${getWeightTotalList}`;
			} else if (this.type === '血氧') {
				url = `${getXieyangTotalList}`;
			} else if (this.type === '胆固醇') {
				url = `${getXiezhiTotalList}`;
			} else if (this.type === '体温') {
				url = `${getTiWengTotalList}`;
			} else if (this.type === '尿常规') {
				//url = `${getXieyaTotalList}`
			}
			this.$http
				.get(url, params)
				.then(r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}

					this.historyList = r.data;
					let series = [];
					let categories = [];
					let chartData = {};
					let data = [];
					let data2 = [];
					let data3 = [];
					let data4 = [];

					let serie = {};
					let serie2 = {};
					let serie3 = {};
					let serie4 = {};

					this.historyList.forEach((item, index) => {
						let gTime = item.days;
						categories.push(gTime);
						if (this.type === '血压') {
							data.push(item.high);
							data2.push(item.low);
							data3.push(item.rate);
						} else if (this.type === '血糖') {
							if (item.chxt == 0) data.push(item.kfxt);
							else data2.push(item.kfxt);
						} else if (this.type === '心率') {
							data.push(item.avr_heartrate);
						} else if (this.type === '运动') {
							data.push(item.target);
							data2.push(item.step);
						} else if (this.type === '尿酸') {
							data.push(item.niaosuan);
						} else if (this.type === '体质') {
							data.push(item.weight);
							data2.push(item.height);
							//data3.push(item.bmi);
						} else if (this.type === '血氧') {
							data.push(item.oxygen);
							data2.push(item.rate);
						} else if (this.type === '胆固醇') {
							data.push(item.oxygen);
						} else if (this.type === '体温') {
							data.push(item.tiweng);
						} else if (this.type === '尿常规') {
						}
					});

					if (this.type === '血压') {
						serie['name'] = '高压';
						serie['data'] = data;
						serie2['name'] = '低压';
						serie2['data'] = data2;
						serie3['name'] = '脉搏';
						serie3['data'] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血糖') {
						serie['name'] = '餐后';
						serie['data'] = data;
						serie2['name'] = '餐前';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '心率') {
						serie['name'] = '心率';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '运动') {
						serie['name'] = '目标';
						serie['data'] = data;
						serie2['name'] = '实际';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '尿酸') {
						serie['name'] = '尿酸';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体质') {
						serie['name'] = '体重';
						serie['data'] = data;
						serie2['name'] = '身高';
						serie2['data'] = data2;
						//serie3["name"] = 'BMI';
						//serie3["data"] = data3;

						series.push(serie);
						series.push(serie2);
						series.push(serie3);
					} else if (this.type === '血氧') {
						serie['name'] = '血氧值';
						serie['data'] = data;
						serie2['name'] = '脉搏率';
						serie2['data'] = data2;

						series.push(serie);
						series.push(serie2);
					} else if (this.type === '胆固醇') {
						serie['name'] = '胆固醇';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '体温') {
						serie['name'] = '体温';
						serie['data'] = data;

						series.push(serie);
					} else if (this.type === '尿常规') {
					}

					chartData.series = series;
					chartData.categories = categories;
					_self.showLineA(chartData);
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},		
		showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				fontSize: 11,
				padding: [5, 15, 15, 15],
				legend: {
					show: true,
					position: 'top',
					float: 'center',
					itemGap: 30,
					padding: 5,
					margin: 5,
					//backgroundColor:'rgba(41,198,90,0.2)',
					//borderColor :'rgba(41,198,90,0.5)',
					borderWidth: 1
				},
				dataLabel: true,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				enableScroll: true,
				xAxis: {
					disableGrid: false,
					type: 'grid',
					gridType: 'dash',
					itemCount: 4,
					scrollShow: true,
					scrollAlign: 'left'
				},
				yAxis: {
					//disabled:true
					gridType: 'dash',
					splitNumber: 4,
					min: 10,
					max: 180,
					format: val => {
						return val.toFixed(0);
					} //如不写此方法，Y轴刻度默认保留两位小数
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						width: (_self.cWidth * _self.pixelRatio * 0.45) / chartData.categories.length
					}
				}
			});
		},
		touchColumn(e) {
			canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
			canvaColumn.scroll(e);
		},
		touchEndColumn(e) {
			canvaColumn.scrollEnd(e);
			canvaColumn.touchLegend(e, {
				animation: true
			});
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		changeData(newdata) {
			// if (isJSON(_self.textarea)) {
				//let newdata = JSON.parse(_self.textarea);
				canvaColumn.updateData({
					series: newdata.series,
					categories: newdata.categories,
					scrollPosition: 'right',
					animation: false
				});
			// } else {
			// 	uni.showToast({
			// 		title: '数据格式错误',
			// 		image: '../../../static/images/alert-warning.png'
			// 	});
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: $page-color-base;
}

.yt-list {
	margin-top: 16upx;
	background: #fff;
	.iconshanchu4 {
		margin-left: $spacing-sm;
	}
}
.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;
	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 32upx;
		font-size: 22upx;
		text-align: center;
		line-height: 32upx;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: $font-color-light;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: $font-color-light;
		margin-right: 10upx;
	}

	.cell-tip {
		max-width: 70%;
		font-size: 26upx;
		&.disabled {
			color: $font-color-light;
		}

		&.active {
			color: $base-color;
		}
		&.red {
			color: $base-color;
		}
		.invoice {
			display: flex;
			justify-content: space-between;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: $font-base;
		color: $font-color-dark;
	}
}

/*边框*/
.b-b:after,
.b-t:after {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	height: 0;
	content: '';
	transform: scaleY(0.5);
	border-bottom: 1px solid $border-color-base;
}

.input-content {
	padding: 40upx 60upx;

	.input-item {
		display: flex;
		padding: 0 30upx;
		background: $page-color-light;
		height: 80upx;
		line-height: 80upx;
		border-radius: 4px;
		margin-bottom: 30upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			width: 100upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			width: calc(100% - 100upx);
			height: 80upx;
			line-height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}

		.date {
			height: 80upx;
			line-height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}

		.gender-item {
			margin-right: 20upx;

			.gender-item-text {
				padding-left: 10upx;
			}

			radio .wx-radio-input.wx-radio-input-checked {
				background: $uni-color-primary;
				border-color: $uni-color-primary;
			}
		}
	}
}
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}
.footprint {
	.row {
		width: calc(94%);
		height: calc(22vw + 40upx);
		margin: 20upx auto;
		border-radius: 15upx;
		box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;
		.menu {
			.icon {
				color: #fff;
				font-size: 60upx;
			}
			position: absolute;
			width: 29%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
		}
		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}
			&.open {
				animation: showMenu 0.25s linear both;
			}
			&.close {
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;
			.left {
				width: 22vw;
				height: 22vw;
				margin-left: 20upx;
				margin-right: 10upx;
				position: relative;
				.image {
					border-radius: 10upx;
					width: 22vw;
					height: 22vw;
				}
				.tag {
					position: absolute;
					left: 0;
					top: 0;
					width: 60upx;
					height: 60upx;
				}
			}
			.mid {
				width: 100%;
				margin: 10upx 10upx 0;
				.title {
					height: 60upx;
					line-height: 1.2;
					font-size: $font-base;
				}
				.data {
					width: 100%;
					display: flex;
					align-items: center;
					margin: 10upx 0 5upx;
					font-size: $font-base;
					color: $font-color-base;
					.item {
						flex: 1;
					}
					.iconfont {
						color: $font-color-light;
						margin-right: 10upx;
					}
					.status {
						padding: 6upx 20upx;
						background-color: $base-color;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
					.normal {
						padding: 6upx 20upx;
						background-color: #4cd964;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
				}
				.bottom {
					line-height: 1.2;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $font-sm;
					color: $font-color-light;
					.price {
						font-size: $font-lg;
					}
				}
			}
		}
	}
}
</style>
